<include file="header" />
<body>
<div class="wraper">
    <div class="load">
        <img class="load-bee" src="/assets/base/charging/images/load-bee.png">
    </div>
    <div class="top">
        <p>
            <a href="#" class="iconfont icon-zuo fl-left"></a>
            {BEESCRM:$app_name}
            <a href="{BEESCRM::U('/Base/Charging/index',array('chargingId'=>$chargingId))}" class="iconfont icon-shouye fl-right"></a>
        </p>
    </div>
    <div class="balance-wallet">
        <p class="padding-b">时长余额</p>
        <div class="tb-mode">
            <span class="balance tb-cell"><if condition="$terminalInfo['fees'] eq 1">免费充电<else/>{BEESCRM:$userInfo['overplus_time']}</if></span>
        </div>
    </div>
    <p class="form">
   	<div class="tab-prize clearfix">
   		<volist name="exchangeList" id="vo">
		<span <if condition="$i eq 1">class="option checked"<else/>class="option"</if> data-amount="{BEESCRM:$vo['value']/60}">{BEESCRM:$vo['value']/60}小时</span>
		</volist>
	</div>
	<p class="result">您的充电时间为<span id="hour">1</span>小时</p>
	<input type="hidden" id="minute" value="60">
    </p>
    <div class="explain block-space">
        <p class="title">平安充电说明：</p>
        <p>1、充电时间精确到分钟</p>
        <p>2、充满后自动断开，微信消息提醒用户充电完成</p>
        <p class="text-red">3、充电时，请关闭电瓶车长鸣报警提醒，以免影响他人作息。</p>
    </div>
    <div class="btn-box">
        <a href="javascript:void(0)" class="btn submit">立即充电</a>
        <input type="hidden" id="terminal_id" value="{BEESCRM:$terminalInfo.terminal_id}">
        <input type="hidden" id="website_id" value="{BEESCRM:$terminalInfo.website_id}">
        <input type="hidden" id="overplus_time" value="{BEESCRM:$userInfo['overplus_time']}">
        <input type="hidden" id="fees" value="{BEESCRM:$terminalInfo.fees}">
    </div>
</div>

<div class="rest-time">
	<div id="js-alert-box" class="alert-box">
		<svg class="alert-circle" width="234" height="234">
			<circle cx="117" cy="117" r="70" fill="#FFF" stroke="#2e9fd2" stroke-width="9"></circle>
			<circle id="js-sec-circle" class="alert-sec-circle" cx="117" cy="117" r="70" fill="transparent" stroke="#F4F1F1" stroke-width="10" transform="rotate(-90 117 117)"></circle>
		</svg>
		<div id="js-sec-text" class="alert-sec-text"></div>
		<div class="alert-body">
			<div id="js-alert-head" class="alert-head"></div>
			<!-- <a href="#" class="alert-btn">放弃等待</a> -->
		</div>
	</div>
</div>

<include file="commonJS" />
<script>


    $(function(){
    	$(document).on('click','.submit',function(){
	    	var json={};
			var data={};
			var overplus_time=Number($('#overplus_time').val());
			var fees=$('#fees').val();
			data.fees=fees;
	    	data.terminal_id=$('#terminal_id').val();
	    	data.website_id=$('#website_id').val();
	    	data.value=Number($('#minute').val());
	    	if(data.value>overplus_time && fees==0){
				$.alert('error','无法充值，时长余额不足');return;
			}
	    	if(!data.terminal_id || !data.website_id){
				$.alert('error','参数错误');return;
			}
	    	if(data.value==0){
				$.alert('error','请选择充电时长');return;
			}
	    	/* json.data=data;
			json.url="{BEESCRM::U('/base/charging/chargeAjax',array('chargingId'=>$chargingId))}";
			json.method='post';
			json.type='json';
			$.getAjax(json,true,function(res){
				reload(res.id)
			}); 
			 */
			 var terminal_id = $("#terminal_id").val();
			$.ajax({
                type:'post',
                dataType:'json',
                data:data,
                url:"{BEESCRM::U('/base/charging/chargeAjax',array('chargingId'=>$chargingId))}",
                beforeSend: function(){
                	countDown('设备连接中，请耐心等待',30);
                },
                success:function(data){
                	if(data.status == 'F') {
                		$('.rest-time').hide();
                		$.alert('error','操作失败，请重新尝试...');
                		//setTimeout('location.href="{BEESCRM::U('/base/charging/charging',array('chargingId'=>$chargingId))}/terminal_id/'+terminal_id + '"',3000);
                	}
                	if(data.status == 'S') {
                		$('.rest-time').hide();
                		setTimeout('location.href="{BEESCRM::U('/base/charging/charging',array('chargingId'=>$chargingId))}/id/'+data.id+'"',3000);
                	}
                	
                },
                error:function(){
                	
                }
            });
			
			
    	});
    	

    	//刷新页面
    	function reload(id){
    		setTimeout('location.href="{BEESCRM::U('/base/charging/charging',array('chargingId'=>$chargingId))}/id/'+id+'"',3000);
    	}
    	
    	$('.tab-prize').on('click','.option',function(){
			if($(this).hasClass('other')){
				$(this).siblings().removeClass('checked');
				$('#amount').change(function(){
					var num=Number($(this).val());
					if(num!=0){
						$('#hour').text(num);
						$('#minute').val(num*60);
					}
				})
					
			}
			else{
				if(!$(this).hasClass('checked')){
					$(this).toggleClass('checked').siblings().removeClass('checked');
				}
				$('#amount').val(0);
				var num=Number($(this).data('amount'));
				$('#hour').text(num);
				$('#minute').val(num*60);
				
			}
		})
    	
    });
</script>

<script type="text/javascript">
	function alertSet(msg,t) {
		
		$('.rest-time').show();
		$('#js-alert-head').text(msg);
		var time = t , dividend = t;
		var	n = $("#js-sec-circle");
		document.getElementById("js-sec-text").innerHTML = time,
		setInterval(function() {
			if (0 == time){
				location.href="";
			}else {
				time -= 1;
				$("#js-sec-text").text(time);
				var e = Math.round(time / dividend * 450);
				n.css("strokeDashoffset",e - 452);
			}
		},
		970);
	}
</script>

<script>alertSet('前往会员注册',20);</script>

</body>
</html>